let csvData = JSON.parse(localStorage.getItem('csvData')) || [];

function initTable() {
    const table = document.createElement('table');
    table.innerHTML = `
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>兴趣领域</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <!-- 数据行 -->
        </tbody>
    `;
    const formArea = document.querySelector('.content');
    formArea.innerHTML = `
        <h2>数据管理</h2>
        <form id="dataForm">
            <input type="text" id="name" placeholder="姓名" required>
            <input type="number" id="age" placeholder="年龄" required>
            <input type="text" id="category" placeholder="兴趣领域" required>
            <button type="submit">添加数据</button>
        </form>
        ${table.outerHTML}
    `;

    renderTable();
}

function renderTable() {
    const tbody = document.getElementById('table-body');
    tbody.innerHTML = '';
    csvData.forEach((row, index) => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${row.id}</td>
            <td>${row.name}</td>
            <td>${row.age}</td>
            <td>${row.category}</td>
            <td>
                <button onclick="editRow(${index})">编辑</button>
                <button onclick="deleteRow(${index})">删除</button>
            </td>
        `;
        tbody.appendChild(tr);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    if (window.location.pathname.endsWith('form.html')) {
        initTable();
    }
});

function deleteRow(index) {
    csvData.splice(index, 1);
    localStorage.setItem('csvData', JSON.stringify(csvData));
    renderTable();
}

function editRow(index) {
    const row = csvData[index];
    document.getElementById('name').value = row.name;
    document.getElementById('age').value = row.age;
    document.getElementById('category').value = row.category;

    document.getElementById('dataForm').onsubmit = (e) => {
        e.preventDefault();
        csvData[index] = {
            id: row.id,
            name: document.getElementById('name').value,
            age: document.getElementById('age').value,
            category: document.getElementById('category').value
        };
        localStorage.setItem('csvData', JSON.stringify(csvData));
        renderTable();
        document.getElementById('dataForm').reset();
        document.getElementById('dataForm').onsubmit = addData;
    };
}

function addData(e) {
    e.preventDefault();
    const newEntry = {
        id: csvData.length + 1,
        name: document.getElementById('name').value,
        age: document.getElementById('age').value,
        category: document.getElementById('category').value
    };
    csvData.push(newEntry);
    localStorage.setItem('csvData', JSON.stringify(csvData));
    renderTable();
    document.getElementById('dataForm').reset();
}

// 初始化CSV数据（如果需要）
if (!localStorage.getItem('csvData')) {
    Papa.parse('data/sample.csv', {
        download: true,
        header: true,
        dynamicTyping: true,
        complete: function(results) {
            localStorage.setItem('csvData', JSON.stringify(results.data));
        }
    });
}
